/* sa-toast.css */
div[data-id=sa-toast] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%232A81D1'%3E%3Cdefs%3E%3Cpath d='M19.071 4.929c3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0a9.998 9.998 0 0 1 0-14.142c3.905-3.905 10.237-3.905 14.142 0z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-color: #FFFFFF;
  border-color: #2A81D1;
  background-position: 8px 8px;
  background-repeat: no-repeat;
  background-size: 26px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 0 1px 2px #FFFFFF;
  box-sizing: border-box;
  color: #191C1D;
  height: auto;
  padding: 12px 30px 8px 40px;
  transition: opacity 1s;
  min-width: 320px;
  width: 40%;
  top: 0;
  position: fixed;
  margin: 22px auto;
  left: 0;
  right: 0;
  cursor: pointer;
}
div[data-id=sa-toast] .sa-toast-close {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%232A81D1'%3E%3Cdefs%3E%3Cpath d='M13 11h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4zm9 1c0 5.522-4.478 10-10 10S2 17.522 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 0 0-8-8 8 8 0 1 0 8 8z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(45deg);
}
div[data-id=sa-toast]:hover {
  border-width: 2px;
  padding: 11px 29px 7px 39px;
  background-position: 7px 7px;
}
div[data-id=sa-toast]:hover .sa-toast-action {
  right: 9px;
  top: 7px;
}
div[data-id=sa-toast] > div {
  vertical-align: top;
}
div[data-id=sa-toast].sa-toast-destructive {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23D20F0F'%3E%3Cdefs%3E%3Cpath d='M12.894 2.553l9 18A1 1 0 0 1 21 22H3a1 1 0 0 1-.894-1.447l9-18a1 1 0 0 1 1.788 0zM4.618 20h14.764L12 5.236 4.618 20zm7.383-1a1 1 0 1 1-.002-2A1 1 0 0 1 12 19zM13 15a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0v4z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-color: #FAE7E7;
  border-color: #D20F0F;
}
div[data-id=sa-toast].sa-toast-destructive .sa-toast-close {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23D20F0F'%3E%3Cdefs%3E%3Cpath d='M13 11h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4zm9 1c0 5.522-4.478 10-10 10S2 17.522 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 0 0-8-8 8 8 0 1 0 8 8z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(45deg);
}
div[data-id=sa-toast].sa-toast-info {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%232A81D1'%3E%3Cdefs%3E%3Cpath d='M11.5 15.996v-4h-1a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v5h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1zM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8-3.004a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-color: #E9F2FA;
  border-color: #2A81D1;
}
div[data-id=sa-toast].sa-toast-info .sa-toast-close {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%232A81D1'%3E%3Cdefs%3E%3Cpath d='M13 11h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4zm9 1c0 5.522-4.478 10-10 10S2 17.522 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 0 0-8-8 8 8 0 1 0 8 8z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(45deg);
}
div[data-id=sa-toast].sa-toast-success {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%2323A200'%3E%3Cdefs%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-4.293-7.707l2.237 2.236 5.297-6.18a1 1 0 0 1 1.518 1.302l-6 7a1 1 0 0 1-1.466.056l-3-3a1 1 0 0 1 1.414-1.414z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-color: #E9F5E5;
  border-color: #23a200;
}
div[data-id=sa-toast].sa-toast-success .sa-toast-close {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%2323A200'%3E%3Cdefs%3E%3Cpath d='M13 11h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4zm9 1c0 5.522-4.478 10-10 10S2 17.522 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 0 0-8-8 8 8 0 1 0 8 8z' id='a'/%3E%3C/defs%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath d='M0 0h28v28H0z'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(45deg);
}

.sa-toast-close {
  background-repeat: no-repeat;
  background-size: 20px;
  display: inline-block;
  height: 20px;
  vertical-align: top;
  width: 20px;
}

.sa-toast-text {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  padding: 5px 5px 5px 0;
}

.toast-content {
  margin-right: 20px;
}

.sa-toast-action {
  text-align: right;
  display: inline;
  right: 10px;
  position: absolute;
  top: 8px;
}

.sa-toast-exit-done {
  display: none;
}

.sa-toast-margin-container > div[data-id=sa-toast] {
  display: block;
  position: relative;
  width: auto;
  min-width: unset;
  margin: 22px 14px;
}
